D02 - 原來是白色骷顱人 HTML - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 2

Modern Web

小白大戰基礎網頁開發系列第 2 篇

D02 - 原來是白色骷顱人 HTML

14th鐵人賽

arieltyit122

2022-09-17 09:45:34

450 瀏覽

分享至

相信種種奇幻怪談的電影, 電視劇或是小說, 現今的大家應該都不陌生, 比如剪刀手
愛德華, 科學怪人, 等等, 從無數無生命的骨頭, 木頭, 金屬, 屍體拼湊而成的

那麼 HTML 就像是一個由無數骨頭拼組出來的骷顱人, 但他不會動也沒有造型或色彩, 單純一個靜態的白色骷顱人

Skeleton

組成 HTML (Hyper Text Markup Language) 的是各種文字或是圖像, 也就是骷顱人的骨頭, 關節們

Bones

也就是說, HTML 是一組賦予文本, 圖像, 或是其他內容元素(影音, 超連結), 更多一層附加意義的符號們, 一種標記語言
單純看地上一堆骨頭不具有什麼特別意義, 但是把它們有系統架構組織的拚起來, 賦予骨頭們的賦加意義就是一個可辨別出來的骷顱人
之後討論的 HTML 都會是以比較新的 HTML5 版本為主

HTML 架構:
標記語言, 顧明思義, 就是把文字內容 (content) 用 opening and closing tags 標記起來

SYNTAX: <tag>content</tag> // 這一整個包起來的就是 Element
EXAMPLE: <p>This is a paragraph</p>

HTML 頁面架構:
HTML 頁面會儲存在一個以 .html 為結尾的檔案裡

<!DOCTYPE html>
<html>
  <head>
    information about the page
    <title>page title</title>
  </head>
  <body>
    page contents
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

DOCTYPE tag: 功能是告知瀏覽器把頁面的code解讀成 HTML5 版本, 也就是目前最新版本的語言, 但因為是一個宣告, 所以沒有 closing tag

<h1>HTML Tag</h1>
<h2>HTML Tag</h2>
<h3>HTML Tag</h3>
<h4>HTML Tag</h4>
<h5>HTML Tag</h5>
<h6>HTML Tag</h6>

<h1>Edward Scissorhands</h1>
<p>If I have no knife, I can't protect you.</p>
<p>If I had a sword, I can't hold you.</p>

與大家一起認識 HTML 後, 讓我們來實作一下一份簡易的 html 靜態網頁, 我也會把實作的部分用 github page 呈現 demo 給大家看

menu.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ariel韓式料理</title>
    <meta
      name="description"
      content="本店堅持使用正宗韓式料理烹調手法，主打韓式豆腐煲。店內韓式小菜皆可無限續盤!"
    />
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <h1>韓式料理菜單</h1>
    <img
      src="images/korean.jpg"
      alt="我們主打韓式豆腐煲"
      title="我們主打韓式豆腐煲"
    />
    <p>
        本店的招牌「豆腐煲」, 深受消費者喜愛! 現已發展成全台最大韓式豆腐煲專賣店!
        嚴選頂級非基因改造黃豆，除了致力於照顧消費者的味蕾, 提供最濃,醇,香的豆腐外, 也非常在意消費者的飲食健康。
        
    </p>
    <h3>我們提供的餐食</h3>
    <ul>
      <li>Bulgogi</li>
      
    </ul>
    <table style="border: 1px solid black">
      <thead>
        <!-- table row -->
        <tr>
          <!-- table head -->
          <th>名稱</th>
          <th>大</th>
          <th>小</th>
        </tr> 
      </thead>
      <tbody>
        <tr >
            <td> 牛肉豆腐煲 </td>
            <td> $280 </td>
            <td> $100 </td>
        </tr> 
        <tr style="background: #ccc">
          <td> 泡菜鮮菇嫩豆腐煲 </td>
          <td> $250 </td>
          <td> $100 </td>
        </tr> 
        <tr >
          <td> 嫩豆腐煲 </td>
          <td> $200 </td>
          <td> $80 </td>
      </tr> 
      <tr style="background: #ccc">
        <td> 咖哩嫩豆腐煲 </td>
        <td> $230 </td>
        <td> $90 </td>
    </tr> 
      </tbody>
      <tfoot></tfoot>
    </table>
  </body>
</html>

reservation page.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Order Page</title>
    <style>
      /* textarea{
        resize: none;
      } */
    </style>
  </head>
  <body>
    <img
    src="images/korean reservation.png"
    alt="請在此點餐"
    title="請在此點選您想要的韓式豆腐煲餐點"
    />
    <form action="result page.html">
      <h2>預定餐點表單</h2>
      <!-- TODO: ISP-113 -->
      <hr>
      <a href="menu.html" target="_blank">瀏覽菜單</a>
      <div>
        <label for="name">預約大名</label>
        <input type="text" id="name"/>
      </div>
      <div>
        <label for="">性別</label>
        <label for="man">
          <input type="radio" name="gender" id="man"> 男
        </label>
        <label for="woman">
          <input type="radio" name="gender" id="woman"> 女
        </label>
      </div>
      <div>
        <label for="">豆腐煲系列</label>
        <label for="bulgogi-01">
          <input type="checkbox" name="bulgogi" id="bulgogi-01"> 牛肉豆腐煲
        </label>
        <label for="bulgogi-02">
          <input type="checkbox" name="bulgogi" id="bulgogi-02"> 泡菜鮮菇嫩豆腐煲
        </label>
        <label for="bulgogi-03">
          <input type="checkbox" name="bulgogi" id="bulgogi-03"> 咖哩嫩豆腐煲
        </label>
      </div>
      <div>
        <label for="date">預約用餐時間</label>
        <input type="date" id="date" />
      </div>
      <div>
        <label for="mobile">手機號碼</label>
        <input type="tel" id="mobile" />
      </div>
      <div>
        <label for="seat">座位</label>
        <select name="seat" id="seat">
          <option value="s1">靠窗</option>
          <option value="s2">走道</option>
        </select>
      </div>
      <div>
        <label for="mark">備註</label>
        <textarea name="mark" id="mark" cols="20" rows="3"></textarea>
      </div>
      <button type="reset">重設</button>
      <button type="button">取消訂單</button>
      <button type="submit">送出預約</button>
    </form>
    <!-- <script>
      var x = "test";
      alert(x);
    </script> -->
  </body>
</html>

result page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reservation Result</title>
</head>
<body>
  <h1>Result page</h1>
  <img src="images/reserved.jpg" alt="">
  <p>我們已收到您的預約並且已預約成功, 我們非常期盼您的蒞臨 </p>
  <p>You can be sure that you are in safe hands when dining with us.</p>
</body>
</html>